export default class TimelineEvent {
    $container;
    $timeline;
    // 截流函数，时间戳
    #timestamp = 0;
    // 当前移动距离
    #originalWidth = 200;
    // 当前移动距离
    #width = 0;
    constructor({ originalWidth, width, $timeline, $scroller, $container, update }) {
        this.#originalWidth = originalWidth || $container.width();
        this.#width = width;
        this.$container = $container;
        this.$scroller = $scroller;
        this.$timeline = $timeline;
        this.update = update;
        this.bindEvent()
    }

    /**
     * 对外暴露接口
     *
     * @param arg
     */
    update = (arg) => {}

    /**
     * 【鼠标按下】
     * todo 记录开始位置，已移动距离
     */
    onMouseWheel = (event) => {
        this.#width -= event.deltaY || event.originalEvent.deltaY;
        if (this.#width < this.#originalWidth) {
            this.#width = this.#originalWidth
        }
        this.$timeline.css('width', this.#width)
        this.$scroller.css('width', this.#width)

        // console.log('onMouseWheel: => ', ~~this.#width, this.#originalWidth)
        if (Date.now() - this.#timestamp > 300) {
            const offset = this.$container.offset();
            // console.log('onMouseWheel: => ', event, event.pageX, offsetLeft, pageLeft, left)
            this.update(this.#width, event.pageX - offset.left);
            this.#timestamp = Date.now();
        }
    }

    // 销毁 - 接触事件
    off = () => {
        this.$container.off('wheel', this.onMouseWheel)
    }

    /**
     * 为时间轴绑定时间【鼠标按下】
     */
    bindEvent = () => {
        this.$container.on('wheel', this.onMouseWheel)
    }
}